<template>
  <div class="zy-input">
    <el-input :placeholder="placeholder"
              :prefix-icon="prefixIcon"
              :suffix-icon="suffixIcon"
              :type="inputType"
              :rows="rows"
              :maxlength="inputMaxlength"
              :minlength="minlength"
              :name="name"
              :clearable="clearable"
              :disabled="disabled"
              :showPassword="showPassword"
              :readonly="readonly"
              :showWordLimit="showWordLimit"
              :size="size"
              :autosize="autosize"
              @blur="blur"
              @clear="clear"
              @focus="focus"
              @change="change"
              @input="input"
              v-model="inputValue"></el-input>
  </div>
</template>

<script>
	export default {
		name: "zyInput",
		props: {
			value: {
				type: [Number, String],
				default: () => ""
			},
			placeholder: {
				type: String,
				default: () => ""
			},
			prefixIcon: {
				type: String,
				default: () => ""
			},
			suffixIcon: {
				type: String,
				default: () => ""
			},
			maxlength: {
				type: String,
				default: () => ""
			},
			minlength: {
				type: String,
				default: () => ""
			},
			name: {
				type: String,
				default: () => ""
			},
			type: {
				type: String,
				default: () => "text"
			},
			rows: {
				type: Number,
				default: () => 4
			},
			clearable: {
				type: Boolean,
				default: () => false
			},
			disabled: {
				type: Boolean,
				default: () => false
			},
			showPassword: {
				type: Boolean,
				default: () => false
			},
			readonly: {},
			showWordLimit: {
				type: Boolean,
				default: () => false
			},
			size: {
				type: String,
				default: () => ""
			},
			maxRate: {
				type: String,
				default: () => '100'
			},
			substring: {
				type: Number,
				default: () => 4
			},
			max: {
				type: String,
				default: () => '100'
			},
			isNegative: {
				type: Boolean,
				default: () => false
			},
			autosize: {
				type: Object,
				default: () => {
				}
			}
		},
		data() {
			return {
				inputValue: '',
			};
		},
		computed: {
			inputType() {
				switch (this.type) {
					case 'mobile':
					case 'bank':
					case 'level':
						return 'number';
					case 'rate':
					case 'money':
						return 'text';
					case 'separate':
						return 'text';
					case 'invoiceNumber':
						return 'number';
					default :
						return this.type;
				}
			},
			inputMaxlength() {
				let maxlength = '';
				if (this.maxlength) {
					maxlength = this.maxlength
				} else {
					switch (this.type) {
						case 'text':
							maxlength = 380;
							break;
						case 'rate':
							maxlength = 380;
							break;
						case '':
							maxlength = 20;
							break;
						case 'money':
							maxlength = 380;
							break;
						case 'separate':
							maxlength = 380;
							break;
						case 'textarea':
							maxlength = 200;
							break;
					}
				}
				return maxlength;
			}
		},
		watch: {
			value(val) {
				this.inputValue = val;
			},
			type(val) {
				if (val == 'money') {
					if (isNaN(parseFloat(this.inputValue)) || parseFloat(this.inputValue) == null) {
						this.inputValue = ''
					} else {
						this.inputValue = this.$splitK(parseFloat(this.inputValue).toFixed(2));
					}
				} else if (val == 'invoiceNumber') {
					this.inputValue = String(this.inputValue).replace(/\./g, '')
				}
				this.$emit('input', this.inputValue);
			}
		},
		components: {},
		methods: {
			blur() {
				if (this.type == 'money') {
					//千分符
					if (isNaN(parseFloat(this.inputValue)) || parseFloat(this.inputValue) == null) {
						this.inputValue = ''
					} else {
						this.inputValue = this.$splitK(parseFloat(this.inputValue).toFixed(2));
					}
				}
				this.$emit('blur', this.inputValue);
			},
			focus() {
				if (this.type == 'money') {
					//去除千分符
					this.inputValue = this.inputValue && this.inputValue.replace(/,/g, '')
				}
				this.$emit('focus', this.inputValue);
			},
			change() {
				this.$emit('change', this.inputValue);
			},
			input() {
				let inputValue = '';
				switch (this.type) {
					case 'mobile':
						inputValue = this.inputValue.slice(0, 11);
						break;
					case 'money':
						//转化成千分符格式，数字，两位小数
						let reg = /^-|((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
						if (this.isNegative) {
							if (reg.test(this.inputValue)) {
								inputValue = this.inputValue;
								inputValue = inputValue.replace('--', '-');
							} else {
								inputValue = '';
							}
						} else {
							reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
							if (reg.test(this.inputValue)) {
								inputValue = this.inputValue;
							} else {
								inputValue = '';
							}
						}
						break;
					case 'separate':
						inputValue = this.inputValue.replace(/\s|，/g, ",");
						if (inputValue.split(',').length > 21) {
							inputValue = this.inputValue.replace(/\s|，/g, "");
							return this.$message.error('查询数量超过20个')
						}
						if (inputValue.length > 380) {
							return this.$message.error('字符长度已到上限')
						}
						break;
					case 'text':
						inputValue = this.inputValue;
						break;
					case 'chinese':
						if (this.inputValue.match(/^[\u4e00-\u9fa5]+$/)) {
							inputValue = this.inputValue
						} else {
							inputValue = this.inputValue.match(/[\u4e00-\u9fa5]/g) && this.inputValue.match(/[\u4e00-\u9fa5]/g).join('')
						}

						break;
					case 'rate':
						inputValue = isNaN(parseFloat(this.inputValue)) ? '' : this.inputValue;
						inputValue = inputValue.replace(/-|\+|=/g, '');
						inputValue = inputValue.replace('..', '.');
						if (inputValue) {
							inputValue = inputValue.replace(/[^0-9 |.]/ig, "");
						}
						if (inputValue.split('.')[1]) {
							inputValue = inputValue.split('.')[0] + '.' + inputValue.split('.')[1].substring(0, this.substring);
						}
						if (parseFloat(inputValue) > parseFloat(this.maxRate)) {
							inputValue = this.maxRate;
						}
						break;
					case 'bank':
						inputValue = this.inputValue + '';
						inputValue = inputValue.replace(/\./g, '');
						if (inputValue.length > parseInt(this.maxlength)) {
							inputValue = inputValue.substring(0, parseInt(this.maxlength));
						}
						break;
					case 'level':
						inputValue = this.inputValue;
						if (parseInt(inputValue) > parseInt(this.max)) {
							inputValue = this.max
						}
						inputValue = parseInt(inputValue);
						break;
					case 'number':
						inputValue = this.inputValue;
						break;
					case 'invoiceNumber':
						inputValue = String(parseInt(this.inputValue)).replace(/\.|-/g, '')
						break;
					default:
						inputValue = this.inputValue;
						break;
				}
				this.inputValue = inputValue;
				this.$emit('input', inputValue);
			},
			clear() {
				this.$emit('clear', this.inputValue);
			},
		},
		mounted() {
			this.inputValue = this.value;
			if (this.type == 'money') {
				if (isNaN(parseFloat(this.inputValue)) || parseFloat(this.inputValue) == null) {
					this.inputValue = ''
				} else {
					this.inputValue = this.$splitK(parseFloat(this.inputValue).toFixed(2));
				}
			}
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../style/common/base.less";

  .zy-input {
    width: 100%;
  }

  /deep/ .el-input.is-active .el-input__inner, /deep/ .el-input__inner:focus {
    border-color: @allPrimaryColor;
  }

  /deep/ .el-textarea__inner:focus {
    border-color: @allPrimaryColor;
  }
</style>
